<template>
  <div class="project-canvas-page">
    <div class="canvas-content">
      <div class="canvas-content-header f-r a-c j-a">
        <div class="item f-r a-c">
          <div class="icon icon1" />
          <div class="name">已完成</div>
        </div>
        <div class="item f-r a-c">
          <div class="icon icon2" />
          <div class="name">进行中</div>
        </div>
        <div class="item f-r a-c">
          <div class="icon icon3" />
          <div class="name">未完成</div>
        </div>
        <div class="export-icon" @click="exportImage">导出长图</div>
      </div>
        <div :id="domId" ref="full" class="full" />
    </div>
  </div>
</template>

<script>
import { createRandomId } from '@/utils'
import { Topology } from '@topology/core'
import { http_project } from '@/api'
// 配置项
const canvasOptions = {
  lineName: 'line',
  minScale: 0,
  maxScale: 50,
  // 连线颜色
  font: {
    color: '#fff',
    fontSize: 35
  },
  // 键盘事件 如 删除 移动
  keydown: -1,
  // 缩放 如 ctrl + mousewheel 缩放
  disableScale: true,
  // 移动 如 ctrl + mouse 移动
  disableTranslate: true,
  disableEmptyLine: false,
  autoAnchor: false,
  // autoExpandDistance: 0,
  cacheLen: 0,
  anchorFillStyleL: '#1976d2',
  dockFillStyle: '#1976d2',
  hideInput: false,
}
export default {
  name: 'ProjectCanvas',
  props: {
    projectId: String
  },
  data() {
    return {
      domId: createRandomId(),
      canvas: null,
      productList: []
    }
  },
  mounted() {
    this.initCanvas()
  },
  beforeDestroy() {
    /**
         *  销毁画布
         */
    this.canvas.destroy()
    this.canvas = null
    document.onclick = null
  },
  methods: {
    initCanvas() {
      this.canvas = null
      canvasOptions.on = this.onMessage
      this.canvas = new Topology(this.domId, canvasOptions)
      
      setTimeout(() => {
        // 修复鼠标框选错位
        this.canvas.data.lineName = 'polyline'
        this.canvas.data.toArrow = ''
      }, 1000)
      http_project.read({
        projectId: this.$route.query.projectId
      }).then(res => {
        if (res.data.canvas) {
          const productList = res.data.productList
          this.productList = res.data.productList
          this.canvas.open(res.data.canvas)
          // this.canvas.canvasPos = this.canvas.divLayer.canvas.getBoundingClientRect()
          // this.canvas.fitView(20)
          this.canvas.data.pens.forEach(el => {
            el.strokeStyle = '#1976d2'
          })
          this.canvas.data.pens.forEach(pen => {
            if (pen.data) {
              if (pen.data.type === 'node') {
                const find = productList.find(p => p.productCode === pen.data.productCode)
                if (find) {
                  const color = this.getStatusColor(find.status)
                  pen.fillStyle = '#fff'
                  pen.strokeStyle = color
                  pen.font.color = '#000'
                  // pen.font.fontSize = 14
                  // pen.rect.width = 300
                  // 设置连线颜色
                  const lines = this.canvas.data.pens.filter(_pen => _pen.type === 1)
                  for (let i = 0; i < lines.length; i++) {
                    const _line = lines[i]
                    if (_line.to.id === pen.id) {
                      _line.strokeStyle = color
                    }
                  }
                }
              }
            }
          })
          // pan = new vector(panX, panY);
          if (this.$route.name === '/project-process') {
            this.canvas.lock(10)
          } else {
            this.canvas.lock(1)
          }
          this.canvas.overflow()
          this.canvas.render()
          this.$refs.full.scrollLeft = 290
        }
      })
    },
    onMessage(event, data) {
      if (this.$route.name === '/project-process') return
      if (event === 'node') {
        if (data && data.type === 0 && data.data.type === 'node') {
          // 处理标书
          if (data.data.productCode === 'B203' || data.data.productCode === 'B204') {
            this.$router.push({
              path: '/build',
              query: {
                productCode: data.data.productCode,
                type: 2,
                vconsole: true
              }
            })
            return
          }
          const product = this.productList.find(el => el.productCode === data.data.productCode)
          if (product.status === 1 || product.status === 2) {
            this.$router.push({
              path: '/project-node',
              query: {
                id: product.id,
                intermediaryId: product.intermediaryId,
                isIntervene: product.isIntervene, // 0不需要，1需要
                projectId: this.$route.query.projectId,
                productCode: product.productCode,
                status: product.status,
                type: 2,
                vconsole: true
              }
            })
          } else if (product.status === 0) {
            this.$router.push({
              path: '/project-node-detail',
              query: {
                id: product.id,
                intermediaryId: product.intermediaryId,
                isIntervene: product.isIntervene, // 0不需要，1需要
                projectId: this.$route.query.projectId,
                productCode: product.productCode,
                status: product.status,
                type: 2,
                vconsole: true
              }
            })
          }
        }
      }
    },
    // 0未完成 1进行中 2已完成
    getStatusColor(status) {
      if (status === 0) {
        return '#999999' // 灰
      } else if (status === 1) {
        return '#FF7940' // 橙
      } else if (status === 2) {
        return '#2F86FD' // 蓝
      } else {
        return '#1976d2' // 蓝
      }
    },
    exportImage() {
      this.canvas.saveAsImage('流程图', [0, 0, 10, 0])
    }
  }
}
</script>

<style scoped lang="scss">
.project-canvas-page {
    padding: 20px;
    overflow: hidden;
    height: 100%;
    .canvas-content {
        height: 100%;
        background: #FFFFFF;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .full {
            width: 100%;
            height: 100%;
            touch-action: 'auto';
        }
    }
    .canvas-content-header {
        height: 47px;
        border-bottom: 1px solid #DDDDDD;
        .export-icon {
            width: 56px;
            height: 18px;
            background: #2F86FD;
            border-radius: 5px;
            line-height: 18px;
            color: #ffffff;
            font-size: 10px;
            text-align: center;
        }
        .item {
            .icon {
                width: 23px;
                height: 12px;
                border-radius: 6px;
                margin-right: 10px;
            }
            .name {
                font-size: 10px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
            }
            .icon1 {
                background-color: #2F86FD;
            }
            .icon2 {
                background-color: #FF7940;
            }
            .icon3 {
                background-color: #999999;
            }
        }
    }
}
</style>
